import { TabBar } from 'antd-mobile';
import React from "react";
import { Link, withRouter  } from 'react-router-dom';
import  "./index.css"

class TabBarExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            title: props.title,
            selectedTab: props.selectedTab,
            hidden: false,
        };
    }


    componentDidUpdate(prevProps, prevState) {
        if (this.state.selectedTab !== prevState.selectedTab) {
            this.props.history.push(`/${this.state.selectedTab}`);
        }
    }


    render() {
        return (
            <div className="tabBar">
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#33A3F4"
                    barTintColor="white"
                    hidden={this.state.hidden}
                    tabBarPosition="bottom"
                >
                    <TabBar.Item
                        title="首页"
                        key="home"
                        icon={
                            <div  className="homeIcon" style={{
                                    width: '22px',
                                    height: '22px',
                                }}
                            />
                        }
                        selectedIcon={
                            <div  className="homeIcon" style={{
                                width: '22px',
                                height: '22px',
                            }}
                            />
                        }
                        selected={this.state.selectedTab === 'home'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'home'
                            });
                        }}
                        data-seed="logId"
                    />
                    <TabBar.Item
                        icon={
                            <div className="classifyIcon" style={{
                                    width: '22px',
                                    height: '22px',
                                }}
                            />
                        }
                        selectedIcon={
                            <div className="classifyIcon" style={{
                                width: '22px',
                                height: '22px',
                            }}
                            />
                        }
                        title="分类"
                        key="classify"
                        selected={this.state.selectedTab === 'classify'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'classify'
                            });
                        }}
                    />
                    <TabBar.Item
                        icon={
                            <div className="shopCartIcon" style={{
                                width: '22px',
                                height: '22px',
                            }}
                            />
                        }
                        selectedIcon={
                            <div className="shopCartIcon" style={{
                                width: '22px',
                                height: '22px',
                            }}
                            />
                        }
                        title="购物车"
                        key="shopCart"
                        selected={this.state.selectedTab === 'shopCart'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'shopCart'
                            });
                        }}
                    />
                    <TabBar.Item
                        icon={
                            <div className="meIcon" style={{
                                width: '22px',
                                height: '22px',
                            }}
                            />
                        }
                        selectedIcon={
                            <div className="meIcon" style={{
                                width: '22px',
                                height: '22px',
                            }}
                            />
                        }
                        title="我的"
                        key="me"
                        selected={this.state.selectedTab === 'me'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'me'
                            });
                        }}
                        data-seed="logId3"
                    />
                </TabBar>
            </div>
        );
    }
}


// 使用withRouter高阶组件包装MyComponent，将history对象通过props传入
export default withRouter(TabBarExample);
